<template lang="html">
  <div class="user_page">
    <div class="user_page_top">
      <h3>开通超级会员<img src="../../../assets/image/member/user_top_title_icon.png" alt="">专享8大权益</h3>
      <div class="user_right">
        <img src="../../../assets/image/member/user_page_right.png" alt="">
      </div>
      <div class="user_page_info">
        <img src="../../../assets/image/member/user_page_info_icon.png" alt="">
        <p>
          <template v-if="user_info.user_mobile">{{user_info.user_mobile}}用户，</template>
          开通超级会员预计年均可省 <span>¥3468</span></p>
      </div>
    </div>
    <div class="user_vip_welfare">
      <div class="user_btn">
        <p @click="goToPaymentVip">立即开通¥198/年</p>
        <!-- <p>免费试用3天</p> -->
      </div>
      <div class="user_product">
        <div class="user_product_title">
          <p>购买以下会员活动礼包</p>
          <p>获取超值商品+1年超级会员资格+超值优惠券</p>
        </div>
        <div class="user_product_content">
          <template v-for="(item, index) in prd_list">
            <div :class="item.is_boom === 1 ? 'limit_product_card user_product_card' : 'user_product_card'" @click="goMorePrd" :key="index">
              <div class="user_product_details" >
                <p class="user_page_market">{{item.rights_title}}</p>
                <img :src="item.product_image" alt="">
                <h3>{{item.product_name}}</h3>
                <p>{{item.product_tips}}</p>
                <p class="product_unit_price"><span>¥{{item.product_unit_price}}</span></p>
              </div>
              <div class="limit_tips"></div>
              <div class="limit_leaf"></div>
            </div>
          </template>
          <div class="user_product_card" @click="goMorePrd">
            <div class="user_product_details more">
              <p>查看更多</p>
            </div>
          </div>
        </div>
        <div class="balloon_1"></div>
        <div class="balloon_2"></div>
        <div class="balloon_3"></div>
      </div>
    </div>
    <div class="vip_eight_equity">
      <div class="vip_eight_title">
        <p>超级会员<span>8</span>大权益</p>
      </div>
      <div>
        <template v-for="(item, index) in vipEightData">
          <div class="vip_eight_card" :key="index">
            <div class="vip_eight_card_top" @click="goToEquity(item.link)">
              <div class="title">
                <h3>{{item.title}}</h3>
                <em></em>
              </div>
              <p>权益详情 ></p>
            </div>
            <div class="subtitle">{{item.subtitle}}</div>
            <div class="vip_eight_content">
              <div class="vip_eight_word">
                <h3>{{item.word_one}}</h3>
                <p v-html="item.word_two"></p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="vip_equity_more">
      <p>更多超级会员专属权益，敬请期待</p>
    </div>
    <div class="open_vip" @click="goMorePrd">
      立即参加
    </div>
  </div>
</template>

<script>
import Tool from '@/utils/tool.js'
import Domain from '@/utils/domain.js'

export default {
  props: ['page_type', 'invite_info', 'user_info'],
  // components: { Swipe, PrdItem },
  data () {
    return {
      active: 1,
      first_show: false,
      last_show: false,
      prd_list: [],
      active_prd: '',
      parent_info: [],
      mit_tips: [
        '每家每户一年买两床冬被，两床夏被，三口之家，一年就省3468元'
      ],
      vipEightData: [
        {
          title: '购物省钱',
          link: '0',
          subtitle: '商品3.3折起，最高返利40%',
          word_one: '超级会员最高返利40%',
          word_two: '非会员购物 <span>0</span> 返利'
        },
        {
          title: '分享赚钱',
          link: '1',
          subtitle: '分享购物得消费返利10%-40%',
          word_one: '非会员分享0返利',
          word_two: '超级会员最高分享返利 <span>40</span>%'
        },
        {
          title: '超值优惠券',
          link: '2',
          subtitle: '专享超大额优惠券，可与会员折扣叠加使用',
          word_one: '超级会员享百元优惠券',
          word_two: '折后再使用优惠券，超级便宜',
          word_two_special: '0'
        },
        {
          title: '专属折扣',
          link: '3',
          subtitle: '更多专属福利，折扣更低',
          word_one: '超级会员全场3.3折起',
          word_two: '超低折扣，大牌商品更低价',
          word_two_special: '0'
        },
        {
          title: '无需囤货',
          link: '5',
          subtitle: '超级会员专属家居素材库，所有产品一键分享',
          word_one: '工厂一件代发',
          word_two: '轻松开启线上家居小店铺',
          word_two_special: '0'
        },
        {
          title: '全场包邮',
          link: '4',
          subtitle: '超级会员享全场一件包邮',
          word_one: '超级会员享全场一件包邮',
          word_two: '不限包邮次数，全年尊享',
          word_two_special: '0'
        },
        {
          title: '免费培训',
          link: '6',
          subtitle: '线下沙龙、线上课堂免费参加',
          word_one: '线上课堂免费参加',
          word_two: '家居知识、市场动态、专业技能',
          word_two_special: '0'
        },
        {
          title: '专属顾问',
          link: '7',
          subtitle: '一对一专属服务',
          word_one: '随时解答',
          word_two: '产品疑虑、商城使用、会员权益等',
          word_two_special: '0'
        }
      ]
    }
  },
  created () {
    this.getPrdList()
  },
  methods: {
    share () {
      var url = encodeURIComponent('pages/activity/join_vip/join_vip?invite=' + this.user_info.invite_id)
      var title = encodeURIComponent('倾情推荐！开启超级会员之旅，超值特权嗨不停。')
      var desc = encodeURIComponent('Hi，我是' + this.user_info.user_nickname + '分享一个正品购物平台给你')
      var imgurl = encodeURIComponent(Domain('/wechat/images/v4/share_vip.png'))
      let isClient = Tool.isClient()
      if (isClient) {
        window.location = 'yggshare://title=' + title + '&desc=' + desc + '&imgurl=' + imgurl + '&url=' + url
      } else {
        this.$toast('h5分享微信')
      }
    },
    getPrdList () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'product', params: { is_gift_bag: 1, pagesize: 8 }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.prd_list = resp.data.list
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    showTips (e, prdInfo) {
      this.first_show = true
      this.active_prd = prdInfo
      this.parent_info = e.data
    },
    againOpenTips () {
      this.first_show = false
      this.last_show = true
    },
    closeTips () {
      this.first_show = false
      this.last_show = false
    },
    goMorePrd () {
      let isMini = sessionStorage.getItem('isMini')
      if (isMini) {
        let url = encodeURIComponent(this.$Tool.imgPath('/merber/prd_index'))
        window.wx.miniProgram.navigateTo({ url: '/pages/webview/webview?url=' + url })
      } else {
        this.$router.push('/merber/prd_index')
      }
    },
    goToEquity (i) {
      let isMini = sessionStorage.getItem('isMini')
      if (isMini) {
        let url = encodeURIComponent(this.$Tool.imgPath('/active/equity?id=' + i))
        window.wx.miniProgram.navigateTo({ url: '/pages/webview/webview?url=' + url })
      } else {
        this.$router.push('/active/equity?id=' + i)
      }
    },
    goToPaymentVip () {
      let isMini = sessionStorage.getItem('isMini')
      if (isMini) {
        let token = sessionStorage.getItem('token')
        if (token) {
          window.wx.miniProgram.navigateTo({ url: '/pages/product/super_details/super_details' })
        } else {
          window.wx.miniProgram.navigateTo({ url: '/pages/login/login' })
        }
      } else {
        this.$router.push('/merber/payment_vip')
      }
    }
  }
}
</script>
